<#assign ctx=request.contextPath/>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>产品详情</title>
		<link rel="stylesheet" href="${ctx}/css/bootstrap.css" />
		<link rel="stylesheet" href="${ctx}/css/common.css" />
		<link rel="stylesheet" href="${ctx}/css/pro_details.css" />
		<script type="text/javascript" src="${ctx}/js/jquery-1.11.0.js" ></script>
		<script type="text/javascript" src="${ctx}/js/bootstrap.js" ></script>
		<script type="text/javascript" src="${ctx}/js/magnifier.js"></script>
		<script src="${ctx}/js/localStorge.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="${ctx}/js/comments_banner.js"></script>
		<script type="text/javascript" src="${ctx}/js/myjs.js"></script>
		<script type="text/javascript" src="${ctx}/js/pro_details.js"></script>
		<script type="text/javascript" src="${ctx}/js/banner.js" ></script>
</head>
<body style="background:#f0f0f0;">
		<#include "common/top.html"/>
		<article class="center clear">
			<div class="content_left">
				<div class="title">
					<ul>
						<li><a href="index.html">首页</a></li>
						<li><span>&gt;</span></li>
						<li><a href="#">电子狗</a></li>
						<li><span>&gt;</span></li>
						<li>电子狗ZT326CC</li>
					</ul>
				</div>
				<div class="big_mirror clear">
					<div class="mirror_left">
						<ul>
							<li id="preview">
								<img src="${ctx}/images/pro_big_1.jpg">
								<div id="box1"></div>
							</li>
							<li><div id="big_view"></div></li>
							<li id="banner">
								<a href="javascript:;" id="prev">&lt;</a>
								<a href="javascript:;" id="next">&gt;</a>
								<div id="box">
									<ul>
										<li class="pro_img on"><img src="${ctx}/images/pro_big_2.jpg"></li>
										<li><img src="${ctx}/images/pro_big_3.jpg"></li>
										<li><img src="${ctx}/images/pro_big_4.jpg"></li>
										<li><img src="${ctx}/images/pro_big_2.jpg"></li>
										<li><img src="${ctx}/images/pro_big_3.jpg"></li>
									</ul>
								</div>
							</li>
						</ul>
					</div>		
					
					<div class="mirror_right">
						<h4 id="pro_name">${goods.goods_type.name!''}</h4>
						<h4>${goods.title!''}</h4>
						<p>${goods.description!''}</p>
						<ul>
							<li>价格：<s><em>￥</em>${goods.price!''}</s></li>
							<li>促销价：<em>￥</em><span id="pro_price">${goods.favorable_price!''}</span></li>
							<li>商品评价：<span>好评度99% </span><span>2378人评价</span></li>
							<li>月销量：<span>3000件</span></li>
							<li>配送至：<select name="" id=""><option value="">广州市天河区黄村街道99号</option></select></li>
							<li>数量：<label class="buy_num"><button class="decline">-</button><input class="number" type="text" value="1" onblur="changenum(this)"><button class="increase">+</button><span>剩余存货 100 件</span></label></li>					
						</ul>
						<input type="hidden" id="goodsId" value="${goods.id!''}" >
						<p><input type="submit" value="立即购买" onclick="addPay()" /><input type="submit" onclick="addPro()" value="加入购物车" id="add_cart"></p>
						<script type="text/javascript">
	
							$(function(){								
								$("#add_cart").click(function(){
									var buyNum = $("input[class=number]").val();
									var goodId = $("#goodsId").val();
			
									
									$.post("${ctx}/customer/goodsCar/addGoodsCar",{"buyNum":buyNum,"goodId":goodId},function(data){
										if(data.status=="success"){
											alert("添加购物车成功");
											location.reload();
										}else{
											alert("添加购物车失败");
										}
									});									
								});								
							});
						
						</script>
					</div>
				</div>
				<div class="content_middle clear">
					<div class="middle_left">
						<h4>搜索</h4>
						<form>
							<p class="p1"><label>关键字 : <input type="text"/></label></p>
							<p class="p2"><label>价格 : <input type="text"  placeholder="￥500"/><em>—</em><input type="text"  placeholder="￥1000"/></label></p>
							<p class="p3"><input type="submit" value="确定"></p>
						</form>
						<h4>相似商品</h4>
						<ul>
							<li><a href="#"><img src="images/pro_left_1.jpg" alt=""></a><p><a href="#">善领GT339SC汽车电子狗自动升级云狗</a></p><span><em>￥</em>999</span>
							</a>
							</li>
							<li><a href="#"><img src="${ctx}/images/pro_left_2.jpg" alt=""></a><p><a href="#">善领GT339SC汽车电子狗自动升级云狗</a></p><span><em>￥</em>999</span></li>
							<li><a href="#"><img src="${ctx}/images/pro_left_3.jpg" alt=""></a><p><a href="#">善领GT339SC汽车电子狗自动升级云狗</a></p><span><em>￥</em>999</span></li>
							<li><a href="#"><img src="${ctx}/images/pro_left_4.jpg" alt=""></a><p><a href="#">善领GT339SC汽车电子狗自动升级云狗</a></p><span><em>￥</em>999</span></li>
							<li><a href="#"><img src="${ctx}/images/pro_left_5.jpg" alt=""></a><p><a href="#">善领GT339SC汽车电子狗自动升级云狗</a></p><span><em>￥</em>999</span></a></li>
							<li><a href="#"><img src="${ctx}/images/pro_left_6.jpg" alt=""></a><p><a href="#">善领GT339SC汽车电子狗自动升级云狗</a></p><span><em>￥</em>999</span></li>
						</ul>					
					</div>
					<div class="middle_right">
						<div class="middle_top">
							<ul>
								<li><a href="javascript:void(0)" class="on" onclick="Toggle(event)">商品详情</a></li>
								<li><a href="javascript:void(0)">售后保障</a></li>
								<li><a href="javascript:void(0);" onclick="Toggle(event)">商品评价</a></li>
							</ul>
						</div>
						<div class="details" style="display: block;">
							<div class="middle_content">
								<h5>产品参数</h5>
								<ul>
									<li>
										<div class="cent">
											<ul>
												<li>产品类型：<span>云电子狗电子狗ZT326CC</span></li>
												<li>安全预警仪固定流动 天气预报 实时路况二代云电子狗</li>
												<li>屏幕尺寸：<span>1.3英寸</span></li>
												<li>屏幕类型： <span>单色OLED显示屏</span></li>
												<li>屏幕分辨率：<span>128*64</span></li>
											</ul>
										</div>
									</li>
									<li>
										<div class="cent">
											<ul>
												<li>机身特点：<span>香槟金</span></li>
												<li>扬声器：<span>8Ω-1.5W</span></li>
												<li>数据接口： <span>Mini USB 2.0</span></li>
												<li>接收频率：<span>1575.42±1.023MHZ，感度值95±2dB</span></li>
												<li>三脚架K-BAND 可探测，34.300GHz±1300MHZ</li>	
											</ul>
										</div>
									</li>
								</ul>
							</div>
							<div class="middle_bottom">
								<div class="title">
									<span>1</span>
									<h1>全频雷达测速</h1>
									<p>固定测速预警，300万全国数据让你所向无敌</p>
								</div>
								<img src="${ctx}/images/pro_middle_1.jpg"/>
								<div class="title">
									<span>2</span>
									<h1>固定测速预警</h1>
									<p>固定测速预警，300万全国数据让你所向无敌</p>
								</div>
								<img src="${ctx}/images/pro_middle_2.jpg"/>
								<div class="title">
									<span>3</span>
									<h1>双GPRS定位系统</h1>
									<p>定位系统动力智能技术，一键启动式高速定位系统</p>
								</div>
								<img src="${ctx}/images/pro_middle_3.jpg"/>
								<div class="title">
									<span>04</span>
									<h1>实时路况、天气信息查询</h1>
									<p>固定测速预警，300万全国数据让你所向无敌</p>
								</div>
								<img src="${ctx}/images/pro_middle_4.jpg"/>
								<div class="title">
									<span>05</span>
									<h2>产品图片展示</h2>
								</div>
								<img src="${ctx}/images/pro_middle_5.jpg"/>
								<div class="title">
									<span>06</span>
									<h2>产品参数</h2>
								</div>
								<img src="${ctx}/images/pro_middle_6.jpg"/>
							</div>
						</div>
						<div class="comment" style="display: none;">
							<div class="comment_top">
								<h4>累计评价<em>1324</em></h4>
							</div>
							<div class="comment_list">
								<div class="list_left">
									<span>好评度</span>
									<i>99<em>%</em></i>
								</div>
								<ul>
									<li><a href="#">质量好(100)</a></li>
									<li><a href="#">服务不错(100)</a></li>
									<li><a href="#">功能正面(105)</a></li>
									<li><a href="#">物流快(207)</a></li>
									<li><a href="#">实惠(207)</a></li>
									<li><a href="#">外形正面(207)</a></li>
									<li><a href="#">功能负面(12)</a></li>
								</ul>
							</div>
							<div class="comment_kid">
								<label>
									<input type="radio" name="kid" checked="checked"  value=""/>
									<span>全部</span>
								</label>
								<label>
									<input type="radio" name="kid"/>
									<span>追评(100)</span>
								</label>
								<label>
									<input type="radio" name="kid"/><span>好评(300)</span>
								</label>
								<label>
									<input type="radio" name="kid"/><span>中评(150)</span>
								</label>
								<label>
									<input type="radio" name="kid"/>
									<span>差评(15)</span>
								</label>
								<select name="" id="">
									<option value=""> 
										按默认

									</option>
								</select>
							</div>
							<ul>							
								<#list commentList as comment>
									<li class="comment_middle">
										<div class="comment_left">
											<span>t***9<em>${comment.user.user_id}</em></span>
											<i>${comment.create_date?string("yyyy-MM-dd")}</i>
										</div>
										<div class="comment_right">
											<p>${comment.detail}</p>
											<span>颜色分类：黄色</span>
											<ul>
												<li><img style="width: 120px;height: 100px;" src="${ctx}/file/upload/${comment.image}" alt=""></li>
											</ul>
										</div>	
									</li>
								</#list>						
							</ul>
							<div class="page clear">
								<ul>
									<li><a href="#">上一页</a></li>
									<li><a href="#"  class="on">1</a></li>
									<li><a href="#">2</a></li>
									<li><a href="#">3</a></li>
									<li><a href="#">4</a></li>
									<li><a href="#">5</a></li>
									<li><a href="#">...</a></li>
									<li><a href="#">下一页</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="content_right">
				<div class="right_header">
					<ul>
						<li><span></span></li>
						<li><h4>相关产品</h4></li>
						<li><span></span></li>
					</ul>
				</div>
				<div class="right_body clear">
					<div class="box">		
						<ul >
							<li><a href="#"><img src="${ctx}/images/pro_right_1.jpg" alt=""></a><span><em>￥</em>899</span></li>
							<li><a href="#"><img src="${ctx}/images/pro_right_2.jpg" alt=""></a><span><em>￥</em>899</span></li>
							<li><a href="#"><img src="${ctx}/images/pro_right_3.jpg" alt=""></a><span><em>￥</em>899</span></li>
							<li><a href="#"><img src="${ctx}/images/pro_right_4.jpg" alt=""></a><span><em>￥</em>899</span></li>
						</ul>
					</div>
					<a href="javascript:;" class="prev">&lt;</a>
					<a href="javascript:;" class="next">&gt;</a>
				</div>	
			</div>
		</article>
	<#include "common/bottom.html" >
</body>
